<template>
  <div class="my_buy_sales_main">
    <el-table
        ref="multipleTable"
        show-overflow-tooltip
        :data="deal_info"
        style="width: 100%"
        :cell-style="{color: '#666', fontFamily: 'Arial',fontSize:'17px'}"
        :header-cell-style="{background:'white', fontFamily:'Helvetica',fontSize:'20px'}"
        height="700"
        tooltip-effect="dark"
        :default-sort = "{prop: 'date', order: 'descending'}">
      <el-table-column
          fixed
          prop="deal_time"
          label="交易创建时间"
          width="220">
        <template slot-scope="scope">
          <i class="deal_time"></i>
          <span>{{scope.row.deal_time }}</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="idle_item_ifdeal"
          label="交易情况"
          width="130">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.idle_item_ifdeal==1" disable-transitions type="primary">
            <span class="typeClass">交易中</span>
          </el-tag>
          <el-tag v-else-if="scope.row.idle_item_ifdeal==2" disable-transitions type="success">
            <span class="typeClass">已交易</span>
          </el-tag>
          <el-tag v-else-if="scope.row.idle_item_ifdeal==3" disable-transitions type="danger">
            <span class="typeClass">未交易</span>
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="idle_item_name"
          label="闲置物品名"
          width="240">
      </el-table-column>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="类别：">
              <span v-if="props.row.idle_item_category==1">考研笔记</span>
              <span v-else-if="props.row.idle_item_category==2">书籍</span>
              <span v-else-if="props.row.idle_item_category==3">文具</span>
              <span v-else-if="props.row.idle_item_category==4">考卷</span>
              <span v-else-if="props.row.idle_item_category==5">其他</span>
            </el-form-item>
            <el-form-item label="科目：">
              <span v-if="props.row.idle_item_subject==1">英语</span>
              <span v-else-if="props.row.idle_item_subject==2">数学</span>
              <span v-else-if="props.row.idle_item_subject==3">政治</span>
              <span v-else-if="props.row.idle_item_subject==4">专业</span>
              <span v-else-if="props.row.idle_item_subject==5">其他</span>
            </el-form-item>
            <el-form-item label="新旧程度：">
              <span v-if="props.row.idle_item_degree==1">全新</span>
              <span v-else-if="props.row.idle_item_degree==2">9成新</span>
              <span v-else-if="props.row.idle_item_degree==3">5成新</span>
              <span v-else-if="props.row.idle_item_degree==4">使用过</span>
              <span v-else-if="props.row.idle_item_degree==5">破旧点</span>
            </el-form-item>
            <el-form-item label="描述：">
              <span>{{ props.row.idle_item_info }}</span>
            </el-form-item>
            <el-form-item label="图片：" v-show="props.row.idle_item_img !='default_idle_img.jpg'">
              <img :src="'/api/storage/idle_img/'+props.row.user_id+'/'+props.row.idle_item_img"
                   style="width:30%;height:30%;object-fit:contain;border-radius: 2px"  alt="...">
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
          prop="user_name"
          label="买家"
          width="180">
      </el-table-column>
      <el-table-column
          prop="idle_item_price"
          label="价格"
          width="120">
        <template slot-scope="scope">
          <i class="deal_time"></i>
          <span>{{scope.row.idle_item_price }}元</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="deal_to_user_remark"
          label="他（她）的备注"
          width="230">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="240">
        <template slot-scope="scope">
          <el-button
              v-show="scope.row.idle_item_ifdeal==1"
              type="danger"
              @click="cancelSaleDeal(scope.$index, scope.row)">
            <span class="btnfontClass" >取消交易</span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--         分页 -->
    <div class="mt-4 panel-footer" style="text-align:center;" v-show="deal_info.length>0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="param.limit"
          layout="total, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {getMySaleDeal,cancelDeal} from '@/api/Deal'
import websocket from "@/utils/websocket";


export default {
  name: "my_sale_deals",
  data(){
    return{
      deal_info:[],
      currentPage:1,
      total:0,
      param:{
        page:1,
        limit:12
      },

    }
  },
  methods:{
    //搜索一页多少条
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.param.limit=val;
      this.initMySaleDeal();
    },
    //搜索第几页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.param.page=val;
      this.initMySaleDeal();
    },
    async initMySaleDeal(){

      getMySaleDeal({
        page: this.param.page,
        limit: this.param.limit
      }).then(res=>{
        this.deal_info=res.data.info;
        this.total=res.data.total;
      });


    },
    //  取消交易
    cancelSaleDeal(index, row){
      //再次确认
      this.$confirm('确认取消交易?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        cancelDeal({
          idle_item_id:row.idle_item_id,
          deal_id:row.deal_id
        }).then(res=>{
          if(res.data.code==1){
            this.$message.success("取消成功！！");
            let ws = websocket.getWebSocket();
            ws.send(JSON.stringify({type:"flush"}));
          }
          else{
            this.$message.success("取消失败！！");
          }
        });

        this.initMySaleDeal();


      }).catch(() => {
        this.$msg.error("取消操作！");
      });

    }



  },
  mounted() {
    window.MySaleDeal=this.initMySaleDeal;
  },
  created() {
    let _this=this;
    _this.initMySaleDeal();

  }
}
</script>

<style scoped>
/*表格展开功能样式*/
.demo-table-expand {
  font-size: 0;
  padding-left: 20px;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
